Auth0のユーザー登録でプラポリ同意のチェックボックスを設置する

認証・認可プラットフォームのAuth0では、登録/ログインページのカスタマイズが簡単にできます。

「会員登録させる際にプライバシーポリシーにも同意してほしい」という場合に、Auth0のLockオプション機能を使って実装していきます。

今回やること

↓のスクリーンショットみたいに、

• 会員登録時に規約に同意させるチェックボックスを設置する
• チェックボックスにチェックをしないと登録が完了できない
• 自前のプライバシーポリシーページへのリンクを貼り、テキストもカスタマイズする

というのをやりたいと思います。

方法

Auth0のLockオプションを使い、ログインページに対して様々なカスタマイズを追加していくことが可能です。

左サイドバー[Branding] > [Universal Login] > [Customize Login Page]にチェックを入れる

HTML編集フィールドで、直接コードを編集できるようになります。

39行目付近の var lock = ... の中でオプションを指定できます。デフォルトは下記のようになっているはず。

その中でも mustAcceptTerms は規約同意のチェックボックスを表示するためのオプションで、boolean値を取ります。

var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
	//中略
	mustAcceptTerms: true,
}

また、規約同意チェックボックスのテキストを任意のも英語で表示されるため、変数 languageDictionaryにテキスト日本語化オプションを追加します。

languageDictionary.signUpTerms = `僕たちの<a href="http://example.com/privacy-policy">ぷらいばしーぽりしー</a>に同意してね。`;

↓のような感じになるかと思います。

languageDictionary.signUpTerms = `僕たちの<a href="http://example.com/privacy-policy">ぷらいばしーぽりしー</a>に同意してね。`;
var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
	//中略
	mustAcceptTerms: true,
}

ちなみに登録/ログインページをまるまる日本語化したい場合は、 language に "ja" を入れることで、規約同意テキスト含めてまるっと翻訳してくれます。お利口です。

最後に

Lockオプションを使うことで、今回のような規約同意チェックボックスの追加や、任意の入力フィールドの追加、テーマ・テキスト・ロゴの変更など細かなカスタマイズがAuth0管理画面からできるのは非常に助かりました。

参考URL

https://auth0.com/docs/libraries/lock/lock-configuration#mustacceptterms-boolean-